<template>
	<view class="property-container full-container">
		<geek-list ref="list" :api="fetchList">
			<block #default="{item}">
				<uni-card :class="item.accType" shadow="none">
					<template v-slot:title>
						<view class="header">
							<view class="img">
								<uni-icons v-if="item.accType === 'CREDIT'" custom-prefix="iconfont" color="#aa557f" type="icon-bangdingshezhiyinxingqiabangding" size="44"></uni-icons>
								<uni-icons v-else custom-prefix="iconfont" color="#00557f" type="icon-zijinguanli" size="44"></uni-icons>
							</view>
							<view class="content">
								<view class="tit flex align-center">
									<text style="margin-right: 10rpx;">{{item.id}}</text>
									<up-copy :content="item.id">
										<uni-icons custom-prefix="iconfont" type="icon-copy" color="#666" size="18"></uni-icons>
									</up-copy>
								</view>
								<view class="sub-tit">{{getTypeName(item.accType)}} <text v-if="item.accName">({{item.accName}})</text></view>
							</view>
						</view>
					</template>
					<view class="info">
						<view class="blance">
							<view class="tit">
								<text>可用余额（{{ currencyUnit }}）</text>
								<uni-icons v-if="!item.noShow" @click="item.noShow = true" type="eye" size="18"></uni-icons>
								<uni-icons v-else @click="item.noShow = false" type="eye-slash" size="18"></uni-icons>
							</view>
							<view class="price">
								<view class="xingxing" v-if="item.noShow">
									********
								</view>
								<up-text mode="price" bold v-else :text="$formatPrice(item.balance)"></up-text>
							</view>
							<view class="no-use">
								<view>
									<text>不可用金额：</text>
									<view class="xingxing" v-if="item.noShow">
										******
									</view>
									<up-text mode="price" bold v-else :text="$formatPrice(item.unBalance)"></up-text>
								</view>
								<view>
									<text>冻结金额：</text>
									<view class="xingxing" v-if="item.noShow">
										******
									</view>
									<up-text mode="price" bold v-else :text="$formatPrice(item.frozeAmount)"></up-text>
								</view>
							</view>
						</view>
						<view class="detail">
							<up-button type="primary" :plain="true" :hairline="true" shape="circle" text="明细" @click="$tab.navigateTo(`/pages_mine/pages/property/detail?id=${item.id}`)"></up-button>
						</view>
					</view>
					<template v-slot:actions>
						<view class="action">
							<template v-if="item.accType === 'CREDIT'">
								<up-text text="充值" type="success" @click="$tab.navigateTo(`/pages_mine/pages/recharge/index?id=${item.id}`)"></up-text>
								<up-text text="转账" type="error" @click="$tab.navigateTo(`/pages_mine/pages/property/transfer?id=${item.id}`)"></up-text>
							</template>
							<template v-else>
								<up-text text="额度转换" type="warning" @click="$tab.navigateTo(`/pages_mine/pages/property/convert?id=${item.id}`)"></up-text>
								<up-text text="提现" type="primary" @click="$tab.navigateTo(`/pages_mine/pages/withdrawal/index?id=${item.id}`)"></up-text>
							</template>
						</view>
					</template>
				</uni-card>
			</block>
		</geek-list>
	</view>
</template>

<script>
	import _ from 'lodash'
	import { list } from '@/api/seller/account'
	
	export default{	
		computed: {
			appInfo() {
				return this.$store.state.user?.appInfo || {}
			},
			
			currency(){
				return this.appInfo.currency || ''
			},
			currencyUnit(){
				return this.appInfo.settleCurrencyUnit || ''
			},
			currencyRate(){
				return this.appInfo.settleCurrencyRate || ''
			},
		},
		methods:{
			fetchList(data = {}){
				return list(data).then((res) => {
					return res?.data || []
				})
			},
			
			handleBuilding() {
				uni.showToast({
					title: '功能建设中~',
					mask: false,
					icon: "none",
					duration: 1000
				});
			},
			
			getTypeName(type){
				const types = {
					'FUND':'红利账户',
					'CREDIT':'信用账号'
				}
				
				return types[type] || '普通账户'
			}
		},
		
		onShow(){
			if(this.$refs?.list){
				this.$refs.list.resetList()
			}
		}
	}
</script>

<style lang="scss" scoped>
	.property-container{
		&::v-deep{
			.uni-card{
				padding: 0 !important;
				margin: 24rpx !important;
				&.CREDIT{
					background: linear-gradient(to left, #fef3f8, #ffffff);
					.header{
						border-bottom: 1px solid #fef3f8;
					}
					.uni-card__actions{
						border-top: 1px solid #fef3f8;
					}
				}
				&.FUND{
					background: linear-gradient(to left, #f4f6ff, #ffffff);
					.header{
						border-bottom: 1px solid #f4f6ff;
					}
					.uni-card__actions{
						border-top: 1px solid #f4f6ff;
					}
				}
			}
			.header{
				display: flex;
				align-items: center;
				padding: 24rpx;
				border-bottom: 1px solid #f4f4f4;
				
				.content{
					flex:1;
					overflow: hidden;
					margin-left: 24rpx;
					display: flex;
					flex-direction: column;
					justify-content: space-between;
					
					.tit{
						font-weight: bold;
						font-size: 32rpx;
						color:#000;
						margin-bottom: 6rpx;
					}
					
					.sub-tit{
						font-size: 28rpx;
						color:#aaaa00;
						display: flex;
						align-items: center;
						text{
							font-size: 26rpx;
							margin-left: 10rpx;
						}
					}
				}
			}
			
			.uni-card__content{
				padding:22rpx 28rpx !important;
				.info{
					display: flex;
					align-items: center;
					justify-content: space-between;
					
					.xingxing{
						font-size: 30rpx;
						color:#000;
					}
					
					.blance{
						flex:1;
						overflow: hidden;
						display: flex;
						flex-direction: column;
						justify-content: space-between;
						
						.tit{
							display: flex;
							align-items: center;
							color:#666;
							font-size: 28rpx;
						}
						
						.u-text__price{
							display: none !important;
						}
						
						.price{
							
							padding: 12rpx 0;
							
							.xingxing{
								padding-top: 10rpx;
								letter-spacing: 8rpx;
								margin-bottom: -10rpx;
							}
							
							.u-text__value{
								font-size: 40rpx !important;
								color: #2979ff !important;
							}
							
						}
						
						.no-use{
							display: flex;
							align-items: center;
							&>view{
								display: flex;
								align-items: center;
								font-size: 24rpx;
								.xingxing{
									margin-top: 8rpx;
									letter-spacing: 3rpx;
									margin-bottom: -6rpx;
								}
								& + view{
									margin-left: 20rpx;
								}
								
								&>text{
									color:#999;
									white-space: nowrap;
								}
							}
						}
					}
					
					.detail{
						.u-button{
							width: 160rpx;
							height: 60rpx;
							line-height: 60rpx;
							padding: 0 !important;
						}
					}
				}
			}
			
			.uni-card__actions{
				border-top: 1px solid #f4f4f4;
				padding: 20rpx;
				
				.action{
					display: flex;
					align-items: center;
					justify-content: flex-end;
					.u-text{
						flex:none !important;
						width: auto !important;
						margin-left: 20rpx !important;
						padding: 4rpx 15rpx;
						cursor: pointer;
					}
				}
			}
		}
	}
</style>